<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    
</head>
<body>
    <!-- 准备好容器 -->
    <div id="test">
        
    </div>
</body>
<!-- react核心库 -->
<script src="../React-js/react.development.js"></script>
<!-- 操作DOM支持库 -->
<script src="../React-js/react-dom.development.js"></script>
<!-- babel转换库  jsx-js -->
<script src="../React-js/babel.min.js"></script>
<script type="text/babel">
    const MyId = "title";
    const MyData = "xxx";
    // 1.创建虚拟DOM[在这使用了js的语法]React.createElement(标签,标签属性,内容)
    const VDOM = (
        <h1 id = {MyId.toLocaleUpperCase()}>
            <span className = "sss" style = {{fontSize:'50px'}}>sss</span>   
            
        </h1>
    )
    // 2.渲染，如果有多个渲染同一个容器，后面的会将前面的覆盖掉
    ReactDOM.render(VDOM,document.getElementById("test"));
    
    /*
    JS表达式：返回一个值，可以放在任何一个需要值的地方  a  a+b  demo(a)  arr.map() function text(){}
    JS语句：if(){} for(){} while(){} swith(){} 不会返回一个值
    */

    //1.定义虚拟DOM，不能使用“”
    //2.标签中混入JS表达式的时候使用{}
    //3.样式的类名指定不要使用class，使用className
    //4.内敛样式要使用style={{样式:"值"}}
    //5.不能有多个根标签，只能有一个跟标签
    //6.标签必须闭合
    //7.如果小写字母开头，就将标签转化为html同名元素，如果html中无该标签对应的元素，就报错
    // 如果是大写字母开头，react就去渲染对应的组件，如果没有就报错
</script>

</html>